<template>
  <view class="home">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-back-top :scroll-top="scrollTop" :right="24" :bottom="240"></u-back-top>
    <!-- 首页全部数据标题 -->
    <view class="home__title">
      <text class="biaoti" @click="showBottomDialog = true">
        {{ channelName }}
      </text>
      <image
        src="/static/image/home/icon_change.png"
        mode=""
        class="home__title__change"
      ></image>
    </view>
    <BenefitCompass
      @change="handleOrderList"
      v-if="showBenefitCompass"
      ref="orderCompass"
    ></BenefitCompass>
    <ServiceCompass
      @change="handleOrderList"
      v-if="showServiceCompass"
      ref="orderCompass2"
    ></ServiceCompass>
    <NoticeCompass class="u-margin-bottom-30"></NoticeCompass>
    <u-popup v-model="showBottomDialog" mode="bottom" class="pop">
      <view
        class="pop__item"
        v-for="(item, index) in channelList"
        :key="index"
        @click="switchingChannel(item.channelNo)"
      >
        <u-image
          class="pop__icon"
          width="60rpx"
          height="60rpx"
          :src="item.logoImgUrl"
        ></u-image>
        <view>{{ item.name }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import upApp from '@/uni_modules/uni-upgrade-center-app/utils/check-update.js';

import BenefitCompass from './components/BenefitCompass.vue';
import ServiceCompass from './components/ServiceCompass.vue';
import NoticeCompass from './components/NoticeCompass.vue';
export default {
  components: {
    BenefitCompass,
    ServiceCompass,
    NoticeCompass,
  },
  data() {
    return {
      showBottomDialog: false,
      dataList: [
        {
          text: '点赞',
          color: 'blue',
          fontSize: 28,
        },
        {
          text: '分享',
        },
        {
          text: '评论',
        },
      ],
      scrollTop: 0,
      newsList: [],
      messages: [],
      showBenefitCompass: true,
      showServiceCompass: true,
      page: {
        pageNo: 1,
        pageSize: 20,
        articleType: 2,
      },
      status: 'loadmore',
      channelList: [],
      channelName: '',
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  onLoad() {
    this.init();
    this.getAllChannelLists();
  },
  onShow() {
    this.$forceUpdate();
    const that = this;
  },
  onReady() {
    //#ifdef APP-PLUS||APP-NVUE||APP-PLUS-NVUE
    upApp();
    //#endif
  },
  computed: {
    permissions() {
      return uni.$zx.permissions;
    },
  },
  onTabItemTap({ index, pagePath, text }) {
    uni.removeStorageSync('newsCompass');
    uni.removeStorageSync('order_deliver');
  },
  methods: {
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.getNewsList();
    },
    handleOrderList(name) {
      uni.setStorageSync('newsCompass', name);
      uni.setStorageSync('update_order', true);
      uni.switchTab({
        url: '/pages/order/index/index',
      });
    },
    handleDeliverList(value) {
      uni.setStorageSync('order_deliver', value);
      uni.setStorageSync('update_order', true);
      uni.switchTab({
        url: '/pages/order/index/index',
      });
    },
    init() {},
    getNewsList() {
      this.$zx.common_api.newsList({ ...this.page }).then((data) => {
        // console.log('newsList----->140', data);
        const { records } = data;
        this.newsList = this.newsList.concat(records);
        if (records.length !== 0) {
          this.status = 'loadmore';
          this.page.pageNo += 1;
        } else {
          this.status = 'nomore';
        }
      });
    },
    getAllChannelLists() {
      this.$zx.user_api.getAllChannelLists().then((data) => {
        // console.log('getAllChannelLists----->156', data);
        this.channelList = data;
        this.channelName = this.channelList[0].name;
      });
    },
    // 渠道账号ID
    switchingChannel(channel) {
      this.$zx.user_api
        .switchingChannel({ channelNo: channel })
        .then((data) => {
          console.log('switchingChannel------->164', data);
          if (data) {
            this.showBottomDialog = false;
            this.channelName = data.name;
          }
          // 触发子组件
          this.$refs.orderCompass.getBenefitData();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  &__title {
    font-weight: bold;
    background: white;
    padding: 0rpx 20rpx;
    font-size: 36rpx;
    &__change {
      width: 34rpx;
      height: 34rpx;
      margin: 0 0 0 10rpx;
      vertical-align: middle;
    }
  }
  &__news {
    width: 720rpx;
    height: 140rpx;
    border-radius: 12rpx;
    position: relative;
    &--image {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2222;
    }
    &--swiper {
      flex: 1;
    }
  }
  &__grid-group {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 0 10rpx;
  }
  // 全部数据标题样式
  .home__title {
    // 计算状态栏的高度
    padding-top: var(--status-bar-height);
    // 只在H5下显示
    /* #ifdef H5 */
    padding-top: 20rpx;
    /* #endif */
  }
}
.point {
  display: block;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: $zx-theme-color;
  margin-left: 16rpx;
}

.pop {
  // background-color: white;
  // padding: 20rpx;

  &__item {
    height: 80rpx;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
  }

  &__icon {
    display: inline-block;
    margin-left: 20rpx;
    margin-right: 10rpx;
  }
}
</style>
